<template>
	<view class="between-box e-flex e-flex-between" :style="[style]" @tap="$emit('click')">
		<view @tap.stop="$emit('click', 'left')">
			<text v-if="leftText" :style="{ 'font-size': textSize }">{{ leftText }}</text>
			<slot name="left" v-else></slot>
		</view>
		<view class="between-box__right e-flex e-flex-1" @tap.stop="$emit('click', 'right')">
			<slot>
				<view class="e-flex-1"></view>
			</slot>
			<view v-if="iconShow" class="e-p-l-10 e-flex-xy-center">
				<e-icon name="arrow-right" size="36rpx"></e-icon>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'between-box',
	props: {
		paddingY: {
			type: String,
			default: '30rpx'
		},
		leftText: String,
		textSize: {
			type: String,
			default: '30rpx'
		},
		iconShow: {
			type: Boolean,
			default: true
		},
		bgColor: {
			type: String,
			default: '#fff'
		}
	},
	computed: {
		style() {
			return {
				paddingTop: this.paddingY,
				paddingBottom: this.paddingY,
				backgroundColor: this.bgColor
			};
		}
	}
});
</script>
<style lang="scss" scoped>
.between-box {
	width: 100%;
	&__right {
		overflow: hidden;
	}
}
</style>
